<html>
    <head>
        
 <script src="js/jquery-1.7.1,min.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
     
                //login window
               $(document).ready(function() {
				$('a.info-popup').click(function() {

//                //Getting the variable's value from a link
		var loginBox = $(this).attr('href');
                var id=this.id;
               
                var Carinfo =id.split(":");
                $('#title').html(Carinfo[2]);
                $('#transmission').html(Carinfo[3]);
                $('#miles').html(Carinfo[4]);
                $('#stock').html(Carinfo[5]);                   
              	$('#pict').attr('src',Carinfo[1]);
              	document.getElementById("stock_id").value=Carinfo[5];
              	
                            
		//Fade in the Popup
	$(loginBox).fadeIn(300);

		//Set the center alignment padding + border see css style
		var popMargTop = ($(loginBox).height() + 24) / 2;
		var popMargLeft = ($(loginBox).width() + 24) / 2;

		$(loginBox).css({
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		return false;
	});

//	// When clicking on the button close or the mask layer the popup closed
	$('a.close').live('click', function() {
	  $('.login-popup').fadeOut(300 , function() {
		
	});
	return false;
	});
});

//function showStockInfo(id)
//{
//    alert(id);
//}

</script>
<style type="text/css">

    *{ margin:0; padding:0;  }
            #logo{ text-align:center; }
           
a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;}
 #header{text-shadow:0 0 20px white ;text-align:center;color:#000;font-size:xx-large;font-weight:bolder;  top: 5%; left: 50%; background:url(bg-top.jpg)}
	 #mask {
	display: none;
	background: #000;
	position: fixed; left: 0; top: 0;
	z-index: 10;
	width: 100%; height: 100%;
	opacity:0.2;
	z-index: 999;
}

/* You can customize to your needs  */
.login-popup{
    background-color:black;
	font-size: 1.2em;
	position: fixed;
	top: 50%;
   	left: 50%;
	z-index: 1000px;
        display: none;
}

#requestinfo{
    font: 116% 'Ariel',cursive;
    color:#00cccc;
    text-align: center;
}
#formrequest{
    background-color:#66cdcc ;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   padding: 2px;
}
#content .btn_close{
    float:right;
    height:inherit;
    width:inherit;
    border:none;
    margin:0px;
   margin: -20px -20px 0 0;
}
    .button:hover { background:#000; }
     #contentpopup{
        width:500px;
    background-color: #555550;
    border:5px solid #4b4b47;
    border-radius:15px 15px 15px 15px;
    height:519px;
    margin-left: 5px;
  
    }
    #headerpopup{
         width:500px;
    background-color: #555550;
    border:5px solid #4b4b47;
    border-radius:15px 15px 15px 15px;
    height:20px;
    margin-left:5px;
    
  
    }
    #popupmain{
        background-color:#171717;
        width:520px;
        height:auto;
        margin-bottom:5px;
       margin-top: 5px;
        
      
    }
    #rightimage{
    width:150px;
   border:2px solid #ffffff;
    padding: 2px;
    height:100px;
    text-align: center;
    background-image:url("images/car1.jpg");
    background-repeat:no-repeat;
}
</style>

    </head>

    <body>
        <br><br><br><br>
            <div id="login-box" class="login-popup">
<div id="popupmain">
<div id="headerpopup">
    <a href="index.php" class="close"><img src="images/close1.png" class="btn_close" title="Close Window" /></a>
     <strong style="margin-top: 5px;float:left;margin-right:20px;color:#66cccc;font-size: 18px;font-weight:bold">Request More info.</strong>
</div>
<div id="contentpopup">
    <table style="float:left">
    <tr align="left">
       		<td align="left" width="517px" style="overflow: hidden;padding: 5px">
    			<img  width="150px" height="100px" id="pict" style="float: left;border-style: groove;padding: 2px" src="images/car1.jpg"/>
                        <br><strong id="title" style="font-size:13px"><?php if($Car[1]==NULL){echo "Not Available";}else{echo $Car[1];}?></strong><br>
                    <strong id="transmission" style="font-size:12px" ><?php if($Car[7]==NULL){echo "Not Available";}else{echo $Car[7];}?></strong><br>
					<strong id="miles"style="font-size:12px"><?php if($Car[6]==NULL){echo "Not Available";}else{echo $Car[6];}?> Miles<strong><br>
                        <strong id="stock" style="font-size:12px" ><?php if($Car[0]==NULL){echo "Not Available";}else{echo $Car[0];}?></strong><br>
                		
          </td>
       	</tr>
        <tr>
        <td><br>
            <form name="email" method="post" action="mail.php" onsubmit="return check_fields()">
                <table border="0">
                <tr>
            		<td><br><textarea id="ta" name="textarea" rows="4" cols="55">Car Web Development.</textarea></td>
        		</tr>
                	<tr>
                		<td align="left">
                                    <br>First name*: <input type="text" name="FirstName" id="fname" value="">
                		</td>
                		
                	</tr>
                	<tr>
                		<td align="left">
				Last name*: <input type="text" name="LastName" id="lname" value="">	                			
                		</td>
                		
                	</tr>
                	<tr>
                		<td align="left">
                			Email*:<input type="text" size="60" id="email" name="Email" value="">
                		</td>
                		
                	</tr>
                	<tr>
                		<td align="left">
                			Phone*:<input type="text" id="phone" name="phone" value="">                			
                		</td>
                		
                	</tr>                	
                	<tr>
                		<td align="left">
                			State*:<input type="text" id="state" name="state" value="">
                		</td>
                		
                	</tr>    
                	<tr>
                		<td align="left">
                			City*:<input type="text" id="city" name="city" value="">
                		</td>
                		
                	</tr>                	                	            	                	
                </table>
                <input type="hidden" name="stock_num" id="stock_id">
                <p>--------------------------------------------------------------------------------------------------<p>
                    <br><strong style="font-size:12px"> * fields are mandatory</strong>
                    <br><input type="submit" value="Submit" style="margin-left:150px;background-color: #00cccc;color: black;">
                </form> 
        </td>
        </tr>
        </table></div>
       </div>
       </div>
        </body>
<script type="text/javascript">


function check_fields()
{
    var fname= document.getElementById("fname").value;
var lname= document.getElementById("lname").value;
var email= document.getElementById("email").value;
var phone= document.getElementById("phone").value;
var state= document.getElementById("state").value;
var city= document.getElementById("city").value;
	if(fname=="")
		{
			alert("Please enter FirstName");
			return false;
		}
	if(lname=="")
	{
		alert("Please enter LastName");
		return false;
	}
	if(email=="")
	{
		alert("Please enter Email");
		return false;
	}
	if(phone=="")
	{
		alert("Please enter Phone");
		return false;
	}
	if(state=="")
	{
		alert("Please enter State");
		return false;
	}
	if(city=="")
	{
		alert("Please enter City");
		return false;
	}
	else
	{
		return true;
	}
}
</script>